<template>
<div >
    <ylheader :leftsvg='true' :title="title" ></ylheader>
    <rotaoteend v-if="status==2"/>
    <div class="loadmore-container" ref="roundrotateWrapper" v-else>
      <div class="loadmore-ul">
        <div class="container">
          <div class="lucky-wheel">
            <div class="wheel-main a-c">
              <div class="wheel-pointer-box">
                  <div class="wheel-pointer" @click="golottery()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
              </div> 
              <div class="wheel-bg a-c" :style="{transform:rotate_angle,transition:rotate_transition}">                   
                  <div class="prize-list">
                      <div class="prize-item" v-for="(item,index) in prizesList" :key="index">
                          <div class="prize-pic">
                              <img :src="item.prizePicture" v-if="item.prizePicture">
                          </div>
                          <div class="prize-count">
                            <span class="prize-countsp">{{item.prizeName}}</span> 
                          </div>
                      </div>
                  </div>
              </div>   
            </div>
            <div class="lvb-f h-c">
              <div class="lvb-t a-c">
              <img src="~img/chou-lvb.png" class="chou-icon">
                <span >当前绿币：<span class="lvb-num">{{coininfo.userCoin}}</span></span>
                <span>&nbsp;&nbsp;每次消耗<span class="lvb-num">{{coininfo.cost}}</span>绿币</span>
              </div>

            </div>
            <div class="rt-r-fa">
                <div  @click="gorecode">
                  <img src="~img/chou-jilu.png" >
                </div>
                <div  @click="gourl">
                    <img src="~img/chou-guize.png" >
                </div>
            </div>
            <rotateuser :headline="headline"></rotateuser>
          </div>
        </div>

        <rotatepop :prizeName="prizeinfo.prizeName" :prizeType="prizeinfo.prizeType" :ispopshow="ispopshow" @ispopshow="confirmpop" ></rotatepop>
      </div>
    </div>
</div>
</template>
<script>
import api from "src/api/index";
import rotatepop from "src/components/rotate/rotatepop.vue";
import rotateuser from "src/components/rotate/rotateuser.vue";
import rotaoteend from "src/components/rotate/rotate-end.vue";
// import $ from jquery;
export default {
  name:"roundrotate",
  data() {
    return {
      during_time:5,
      rand_circle:6,// 附加多转几圈，2-3 
      coininfo:{},
      prizeinfo:{},
      repeat:"",//可重复次数
      restChance:"",//剩余抽奖次数
      click_flag: true, //是否可以旋转抽奖
      headline:[],
      ispopshow:false,
      prize:2,
      prizeType:0,
      start_rotating_degree: 0, //初始旋转角度
      rotate_angle: 0, //将要旋转的角度
      start_rotating_degree_pointer: 0, //指针初始旋转角度
      rotate_angle_pointer: 0, //指针将要旋转的度数
      rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
      rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
      prizesList: [], //奖品列表
      status:"",
      title:""
    };
  },
  components: {
    api,
    rotatepop,
    rotateuser,
    rotaoteend
  },

  mounted() {
    this.getdraw()
  },
  methods: {
    init(){
      this.drawrecord()
          .then(data=>{
            this.initScroll();
          }).then(data => {
            this.$nextTick(() => {
                setTimeout(() => {
                  this.myscroll.refresh();
                }, 100);
              })
          });
      },
     getdraw(){
          let p = new Promise((resolve, reject) => {
            api.getdraw({drawId:this.$route.query.drawId}).then(res=>{
                if(res.success){
                    this.status=res.data.status
                    if(this.status==2){
                      this.title="抱歉"
                    }else{
                      this.init()
                      this.title="抽奖"
                    }
                    this.prizesList = res.data.prizeList;
                    this.prizesList.push(this.prizesList[0]);
                    this.prizesList.splice(0,1);
                    this.coininfo.cost = res.data.cost;
                    this.coininfo.userCoin = res.userCoin;
                    this.restChance = res.restChance;
                    this.repeat = res.data.repeat;
                    setTimeout(()=>{//文字弯曲
                      _each(this.prizesList,(v,i)=>{
                        $(".prize-countsp:eq("+i+")").arctext({radius: 100});
                      })
                    },50);
                }
                resolve("获取抽奖信息...");
            })
          });
          return p;
    },
    drawrecord(){
         let p = new Promise((resolve, reject) => {
           api.drawrecord({drawId:this.$route.query.drawId}).then(res=>{
               if(res.success){
                   this.headline = res.data;
               }
               resolve("获取抽奖记录轮播..");
           })
         });
         return p;
    },
   rotate_handle(){
    let rotate_angle =
          this.start_rotating_degree +
          this.rand_circle * 360 +
        60*this.prize -
          this.start_rotating_degree % 360;
        this.start_rotating_degree = rotate_angle;
        this.rotate_angle = "rotate(" + rotate_angle + "deg)";
        let that = this;
         // 旋转结束后，允许再次触发
        setTimeout(function() {
          that.click_flag = true;
          that.ispopshow=true;
        }, that.during_time * 1000 + 1500); // 延时，保证转盘转完

   },
    confirmpop(data){
      this.ispopshow=!this.ispopshow; 
      if(this.prizeType==1){//快递实物
         this.$router.push({path:"/address",query:{tag:1,id:this.prizeinfo.recordId}});
      }else if(this.prizeType==2){//红包
         this.$router.push({path:"/submitresult",query:{tag:1,prizeName:this.prizeinfo.prizeName}});
      }else if(this.prizeType==3){//自取实物
         this.$router.push({path:"/shipaddress",query:{id:this.prizeinfo.recordId,tag:0,typeValue:this.prizeinfo.typeValue}});
      }else if(this.prizeType==4){//绿币
         this.$router.push({path:"/submitresult",query:{tag:2,prizeName:this.prizeinfo.prizeName}});
      }
    },
    golottery(){
      if (!this.click_flag) return;
      this.click_flag=false;
      if(this.coininfo.cost>this.coininfo.userCoin){
        this.$toast("绿币不足");
      }else if( this.repeat!=null&&this.restChance<1){
        this.$toast("对不起，您抽奖次数已达到上限啦");
      }else{
        api.golottery({drawId:this.$route.query.drawId}).then(res=>{
          if(res.success){
            this.$util.saveFootPrint({actType:17,typeValue:this.$route.query.drawId});//用户轨迹
            this.restChance--;
            this.coininfo.userCoin-=this.coininfo.cost;
            this.getcode(res.result.code);
            this.prizeinfo = res.result;
            this.prizeType = res.result.prizeType;
            this.rotate_handle();
          }else{
            this.$toast(res.msg);
          }
        })
      }
    },
    getcode(code){//调整中奖奖品与产品设计一致
      if(code<2){
        this.prize=1-code;
      }else if(code<6){
        this.prize=7-code;
      }
    },
    gourl(){
      this.$router.push({path:"/activityrule",query:{drawId:this.$route.query.drawId,tag:3}});
    },
    gorecode(){
      this.$router.push({path:"/exchangerecode",query:{drawId:this.$route.query.drawId,tag:0}});
    },
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let roundrotateWrapper = this.$refs.roundrotateWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(roundrotateWrapper, {
            preventDefault: false,
            onScrollMove: function() {
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (localStorage.tempPageHeight != document.getElementsByClassName("loadmore-ul")[0].scrollHeight) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName("loadmore-ul")[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
  },
};
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  overflow: hidden;
}
.lucky-wheel {
  width: 100%;
  // height: 12.4rem;
  background: rgb(74,47,127) url("https://youlingqinius.wonderlandnet.cn/chou-title.png?v=1.1") no-repeat;
  background-size: 100%;
  padding-top: 2.45rem;
}
.wheel-main{
  position: relative;
}
.wheel-pointer-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -60%);
  width:1.5rem;
  height: 1.88rem;
}
.wheel-pointer {
  width:1.5rem;
  height: 1.88rem;
  background: url("https://youlingqinius.wonderlandnet.cn/chou-go.png") no-repeat center top;
  background-size: 100%;
  transform-origin: center 60%;
}
.wheel-bg {
  width: 6.58rem;
  height: 6.58rem;
  background: url("https://youlingqinius.wonderlandnet.cn/chou-circle.png") no-repeat center top;
  background-size: 100%;
  color: #fff;
  font-weight: 500;
  flex-direction: column;
  transition: transform 3s ease;
}
.wheel-bg div {
  text-align: center;
}
.prize-list{
  width: 100%;
  height: 100%;
  position: relative;
  .prize-item {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 2.3rem;
    height: 3.3rem;
  }
  .prize-item:first-child {
    top: 0;
    left:2.18rem;
  }
  .prize-item:nth-child(2) {
    top:0.8rem;
    left: 3.7rem;
    transform: rotate(60deg);
  }
  .prize-item:nth-child(3) {
    top: 2.45rem;
    left: 3.5rem;
    transform: rotate(120deg);
  }
  .prize-item:nth-child(4) {
    top: 3.3rem;
    left: 2.1rem;
    transform: rotate(180deg);
  }
  .prize-item:nth-child(5) {
    top: 2.4rem;
    left: 0.7rem;
    transform: rotate(240deg);
  }
  .prize-item:nth-child(6) {
    top: 0.8rem;
    left: 0.7rem;
    transform: rotate(300deg);
  }
}
.prize-pic img {
  width: 1rem;
  height: 0.8rem;
  margin-top: 0.65rem;
}
.prize-count {
  font-size: 0.22rem;
  color: #542c25;
  padding-top: 0.1rem;
}
.lvb-f{
    margin-top: 0.2rem;
    height: 0.6rem;
  .lvb-t{
    background: rgba(0, 0, 0, 0.2);
    padding: 0 0.2rem 0 0;
    border-radius: 15px;
    color: #ffffff;
    height: 0.5rem;
    line-height: 0.5rem;
  }
  .lvb-num{
    font-size: 0.25rem;
    color: #fd986c;
  }
}
.chou-icon{
  width: 0.52rem;
  height: 0.52rem;
  margin-right: 0.1rem;
}

</style>


